<template>
  <div class="dept-cost-comparison">
    <el-table
      size="mini"
      ref="table"
      :border="false"
      align="center"
      :row-config="{height: 30}"
      header-row-class-name="table_header_custom"
      :row-class-name="rowClassName"
      height="100%"
      stripe
      :data="tableData">
      <el-table-column prop="configName" label="商品名称"></el-table-column>
      <el-table-column prop="configValue" label="销量"></el-table-column>
      <el-table-column prop="remark" label="实收金额"></el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">

import { getByKeyApi } from "@/api/largeScreen";

export default {
  name: "deptCostComparison",
  data () {
    return {
      timer: null,
      tableData: [],
      currentRow: 7,
      scrollTop: 0,
      monthStatisticsTimer: null,
    }
  },
  mounted() {
    this.initData()
  },
  beforeUnmount() {
    clearInterval(this.timer)
  },
  methods: {
    initData () {
      clearInterval(this.timer)
      getByKeyApi("bestSellers").then((res) => {
        this.tableData=res.data
        this.$nextTick(() => {
          this.autoCycle()
          // console.log(this.$refs.table);
        })
      })
    },
    //自动循环播放
    autoCycle() {
      this.timer = setInterval(() => {
        try {
          const tableWrap = this.$refs.table?.$refs.bodyWrapper
          const theTableRows = tableWrap?.querySelectorAll('.el-scrollbar__wrap')[0]
          theTableRows.scrollTop = this.scrollTop || 0
          if (theTableRows.clientHeight + theTableRows.scrollTop >= (theTableRows.scrollHeight - 2)) {
            // 重置table距离顶部距离
            this.scrollTop = 0
          } else {
            this.scrollTop += 1
          }
        } catch (e) {}
      }, 30)
    },
    rowClassName () {
      return 'table_tr_custom'
    },
  }
};
</script>

<style lang="scss">
.dept-cost-comparison {
  width: 100%;
  height: 100%;
  .table_header_custom {
    background-image: -webkit-linear-gradient(left, rgba(96, 133, 255, 0.6), rgba(48, 69, 126, 0.6)) !important;
    color: #FFFFFF;
  }
  .table_tr_custom {
    background-color: rgba(96, 178, 255, 0) !important;
    color: #FFFFFF;
  }
  .el-table .el-table__header th,
  .el-table .el-table__header tr,
  .el-table .el-table__header td {
    background-color: #3566E3 !important;
    color: #ffffff;
  }
  .el-table, .el-table__expanded-cell {
    background-color: transparent !important;
  }
  .el-table td, .el-table th.is-leaf {
    border-bottom: 0;
  }
  .el-table::before {
    height: 0 !important;
  }
  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: rgba(48, 69, 126, 0.6);
  }
  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: rgba(48, 69, 126, 0.6);
  }
}

</style>

